<template>
	<view class="yy-dropdown-menu">
		<view class="yy-dropdown-menu__bar yy-dropdown-menu__bar--opened" ref="bar">
			<view class="yy-dropdown-menu__item" @click.stop="toggleItem(index,item)" :key="index"
				v-for="item,index in childrenList">
				<view class="yy-dropdown-menu__title" 
				:class="[{'yy-dropdown-menu__title--active':item.showWrap,
					'yy-dropdown-menu__title--down':item.showWrap }]" 
				:style="[{ color:item.showWrap?activeColor:'',
						},titleColorStyle]">
						
				{{item.title}}
				</view>
			</view>
		</view>
		<view>
			<slot></slot>
		</view>
	</view>
</template>
<script>
	export default {
		name: 'yy-dropdown-menu',
		options: {
			virtualHost: true
		},
		props: {
			titleColorStyle: {
				type: Object,
				default: () => {}
			},
			activeColor: {
				type: String,
				default: '#ee0a24'
			}
		},
		provide() {
			return {
				parent: this
			}
		},
		watch: {
			childrenList: {
				handler(val) {
					// console.log('=====val=====',val)
				},
				immediate: true
			}
		},
		data() {
			return {

				childrenList: [],
				direction: 'down',
				offset: 0,
				style: {
					top: 0
				},
				showMask: true,
				show: false,
				mask: false,
				mask1: false,
				showWrapper: false,
				showWrapper1: false,
				watchTimer: null,
				activeIndex: null,
			}
		},
		mounted() {
			this.updateOffset()
			// #ifdef H5
			window.addEventListener('click', this.close)
			// #endif

		},
		beforeDestroy() {
			this.watchTimer && clearTimeout(this.watchTimer)
			// #ifdef H5
			window.removeEventListener('click', this.close)
			// #endif
		},
		methods: {
			close() {
				if (this.activeIndex == null) return
				if (this.childrenList && this.childrenList.length) {
					let obj = this.childrenList.find(item => {
						return item.showWrap
					})
					if (obj) {
						this.changeStatus(obj, 'mask', 'showWrap', false)

					}

				}

			},
			tabHandle(index) {},
			change(param1, param2, status) {
				this[param1] = status
				this.watchTimer && clearTimeout(this.watchTimer)
				this.watchTimer = setTimeout(() => {
					this[param2] = status
					this.$emit('change', status)

				}, status ? 5 : 200)
			},
			closeMask(ite, index) {
				// this.change('mask','showWrapper',false)
				for (let i = 0; i < this.childrenList.length; i++) {
					let item = this.childrenList[i]
					if (i === index) {
						if (!item.showWrap) {
							this.changeStatus(item, 'showWrap', 'mask', true)
						} else {
							this.changeStatus(item, 'mask', 'showWrap', false)
						}
					} else {
						this.$set(item, 'mask', false)
						this.$set(item, 'showWrap', false)
						// item.mask = false
						// item.showWrap = showWrap
					}
				}
			},
			changeStatus(item, param1, param2, status) {
				// this.$set(item,param1,status)
				item[param1] = status
				this.watchTimer && clearTimeout(this.watchTimer)
				this.watchTimer = setTimeout(() => {
					// item[param2] = status
					this.$set(item, param2, status)
				}, status ? 20 : 200)
			},
			toggleItem(index) {
				for (let i = 0; i < this.childrenList.length; i++) {
					let item = this.childrenList[i]
					if (i === index) {
						if (!item.showWrap) {
							this.changeStatus(item, 'showWrap', 'mask', true)
						} else {
							this.changeStatus(item, 'mask', 'showWrap', false)
						}
					} else {
						item.mask = false
						item.showWrap = false
					}
				}
				// console.log('=======',this.childrenList)
				this.activeIndex = index
				this.updateOffset()
			},
			updateOffset() {
				let query = uni.createSelectorQuery().in(this);
				query.select('.yy-dropdown-menu__bar').boundingClientRect(res => {
					if (this.direction === 'down') {
						this.offset = res.height + uni.getSystemInfoSync().windowTop + res.top;
						this.style.top = `${this.offset}px`;

					} else {
						this.offset = uni.getSystemInfoSync().screenHeight - res.top;
					}
				}).exec();
			},
		}
	}
</script>

<style lang="scss">
	.yy-dropdown-item {
		position: fixed;
		right: 0;
		left: 0;
		z-index: 10;

		overflow: hidden;
	}

	// @animation-duration-base: 0.3s;
	// @animation-duration-fast: 0.2s;
	// @animation-timing-function-enter: ease-out;
	// @animation-timing-function-leave: ease-in;
	.yy-dropdown-menu {
		-webkit-user-select: none;
		user-select: none;
		width: 100%;
	}


	.yy-popup {

		&-slide-top-leave-active,
		&-slide-left-leave-active,
		&-slide-right-leave-active,
		&-slide-bottom-leave-active {
			transition-timing-function: ease-in;
		}
	}


	.yy-popup-slide-top-enter,
	.yy-popup-slide-top-leave-active {
		transform: translate3d(0, -100%, 0);
	}

	.yy-popup-slide-right-enter,
	.yy-popup-slide-right-leave-active {
		transform: translate3d(100%, -50%, 0);
	}

	.yy-popup-slide-bottom-enter,
	.yy-popup-slide-bottom-leave-active {
		transform: translate3d(0, 100%, 0);
	}

	.yy-dropdown-menu__bar {
		position: relative;
		display: flex;
		height: 48px;
		background-color: #f2f2f2;
		box-shadow: 0 2px 12px #6465661f;
	}

	.yy-dropdown-menu__item {
		display: flex;
		flex: 1;
		-webkit-box-align: center;
		align-items: center;
		-webkit-box-pack: center;
		justify-content: center;
		min-width: 0;
		//cursor: pointer;
	}

	.yy-dropdown-menu__title {
		position: relative;
		box-sizing: border-box;
		max-width: 100%;
		padding: 0 8px;
		color: #323233;
		font-size: 15px;
		line-height: 22px;
	}

	.yy-dropdown-menu__title::after {
		position: absolute;
		top: 50%;
		right: -4px;
		margin-top: -5px;
		border: 3px solid;
		border-color: transparent transparent #323232 #323232;
		-webkit-transform: rotate(-45deg);
		transform: rotate(-45deg);
		opacity: 1;
		content: '';
	}

	.yy-dropdown-menu__title--down::after {
		margin-top: -1px;
		-webkit-transform: rotate(135deg);
		transform: rotate(135deg);
	}

	.yy-dropdown-menu__title--active::after {
		border-color: transparent transparent currentColor currentColor;
	}

	.yy-dropdown-menu__bar--opened {
		z-index: 11;
	}

	.yy-dropdown-menu__title--active {
		color: #ee0a24;
	}

	.yy-dropdown-item--down {
		bottom: 0;
	}

	.yy-overlay {
		z-index: 2003;
		position: absolute;
		animation-duration: 0.2s;
		top: 0;
		left: 0;
		z-index: 1;
		width: 100%;
		height: 100%;
		opacity: 0;
		background-color: rgba(0, 0, 0, 0.7);
		transition: opacity 0.3s;
	}

	.mask__visible {
		opacity: 1;
	}

	.yy-popup {
		position: fixed;
		max-height: 100%;
		overflow-y: auto;
		background-color: #fff;
		-webkit-transition: -webkit-transform 0.2s;
		transition: -webkit-transform 0.2s;
		transition: transform 0.2s;
		transition: transform 0.2s, -webkit-transform 0.2s;
		-webkit-overflow-scrolling: touch;
	}

	.yy-dropdown-item__content {
		position: absolute;
		max-height: 80%;
		transition-duration: 0.2s;
		z-index: 2006;
	}

	.yy-popup--top {
		top: 0;
		left: 0;
		width: 100%;
	}

	.content--visible_Y {
		transform: translateY(0px);
	}


	@keyframes yy-fade-in {
		from {
			opacity: 0;
		}

		to {
			opacity: 1;
		}
	}

	@keyframes yy-fade-out {
		from {
			opacity: 1;
		}

		to {
			opacity: 0;
		}
	}

	.yy-fade {
		&-enter-active {
			animation: 0.2s yy-fade-in both ease-out;
		}

		&-leave-active {
			animation: 0.2s yy-fade-out both ease-in;
		}
	}


	.yy-cell {
		position: relative;
		display: flex;
		box-sizing: border-box;
		width: 100%;
		padding: 10px 16px;
		overflow: hidden;
		color: #323233;
		font-size: 14px;
		align-items: center;
		line-height: 24px;
		background-color: #fff;
	}

	.yy-cell::after {
		position: absolute;
		box-sizing: border-box;
		content: ' ';
		pointer-events: none;
		right: 16px;
		bottom: 0;
		left: 16px;
		border-bottom: 1px solid #ebedf0;
		-webkit-transform: scaleY(0.5);
		transform: scaleY(0.5);
	}

	.yy-cell--clickable {
		//cursor: pointer;
	}


	@font-face {
		font-family: "iconfont";
		/* Project id 3711565 */
		src:
			url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAJ0AAsAAAAABiwAAAIqAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHFQGYACCcAooRgE2AiQDCAsGAAQgBYRnBzAbggXIrrApw71IoCYMFA7zwg8FpwSIh//2a/fNnxXFNKlm0SyaaJYoYSsJQqJ0UrcOmUPc/Z+2G0vd+VMRqtMdYw3bmbT7/5emDL2VRVgUDiFxWIyiVpkbW96eX2X9dryc+m6f/lTOAgrwA7GsfRdK96BF0/qBWi9QALuHtVTCXs+LXIXhVQe5E88I1G1Y1TvePb7uTJ8CqTtzA/Z4kDXHU5YEnYmUlmVaqwpldG8Wr0qk5xQv0efj11ZMSEoFu+3scSfufJ2zoOh0OxQfOvP10McSSiiwoiMTV93lE33RxPfVg4Ep2pkFP7rdwBe79oT419mNTTBJK8EPb6kACW6LNtwY9SBRvqOrm+TinWt8/sfn7NN08ZbovwqOnx96s+2/aiOD7zxyMyxKdbUg+AfGLUjMRoaUmwRpNCnvVq07ObrseL/fsfbAueqhamBEtGIiQ6FqisrcEkoatlBWtYO6ZTuHGwZofZFrmPNEEHp9IGl7R6HXN5W5H5QM+0NZr3/U3UTrvIa5iLYYA8EYwkfIIlWTa0kU9hKTtgy4rnCL3GQ0B7ZhlWt7WCNPsaG5SxwRAmJVwa7wGJalAs0qx0iMVEQvTJOa3mJEqupsYSggUAyEHoFMRKlRQJbi911CiVYpwCB1W2aNjIYHNoMFUHt6DQ3cySuNOwmHEAQQplTArjQLlUoK0M2zcigiDOmIorZgOiRCdWN9s/q0E1BnOymcaYXyfZulgep0AA==') format('woff2')
	}

	.iconfont {
		font-family: "iconfont" !important;
		font-size: 16px;
		font-style: normal;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}

	.icon-duihao:before {
		content: "\eaf1";
	}

	.yy-cell__title,
	.yy-cell__value {
		flex: 1;
	}

	.yy-cell__value {
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}
</style>
